<template>
  <div class="remindOrders">
    <title-bar :title="'到货提醒'" />
    <div class="allOrder">
      <van-checkbox-group v-model="checkedOrders">
        <van-list v-model="loading"  :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
          <van-cell-group class="scroll-load">
            <van-cell class="orderCell" v-for="item in remindOrders" clickable v-if="checkbox" >
              <div class="allOrder-item">
                <van-checkbox class="checkbox"  :name="item" ref="checkboxes"  />
                <div class="itemSN">{{item.ordersn}}</div>
                <div class="orderproduct-group" v-for="k in item.orderProducts">

                  <img class="orderImg" :src="k.thumb" alt="">

                  <div class="items-title">
                    <div>{{k.productName}}</div>
                    <div style="color: #917e90;">{{k.specTitle}}</div>
                  </div>
                  <div class="items-count">
                    <div class="yuan" style="display: inline-block;">
                      <span>{{k.price}}</span>
                    </div>
                    <div class="items-total">
                      x<span>{{k.total}}</span>
                    </div>
                  </div>

                </div>
                <div class="order-person">
                  <div class="person-info">
                    <span>{{item.nickname}}</span>
                    <span style="color: #90d0ff;">{{item.mobile}}</span>
                  </div>
                  <div class="person-date">
                    {{item.payTime.substring(0, 16)}}
                  </div>
                </div>
                <div class="order-total yuan">
                  合计：<span class="yuan" style="color: #ff3778">{{item.payprice}}</span>
                  <button class="van-button van-button--danger van-button--small" style="float: right;" @click="goOtherOrder(item)">查看详情</button>
                </div>
              </div>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-checkbox-group>
      <is-empty v-if="isEmpty">抱歉,没有找到符合条件的订单</is-empty>
    </div>



    <van-submit-bar :buttonText="submitBarText" :disabled="!checkedOrders.length" @submit="remindSubmit()" >
      <van-checkbox v-model="checkedAll" @change="setCheckAll"  style="padding: 0 10px;">全选</van-checkbox>
    </van-submit-bar>

  </div>
</template>

<script>
  import { ORDER_REMIND, ORDER_REMIND_SEND } from '@/api/order';
  import IsEmpty from "@/vue/components/is-empty/";
  import TitleBar from '@/vue/components/title-bar/';
  import loadMore from '@/vue/mixin/list-load-more';
  import scrollFixed from '@/vue/mixin/scroll-fixed';
  import { CheckboxGroup, Checkbox, Panel, Card, Tab, Tabs, SubmitBar } from "vant";

  export default{
    mixins: [loadMore,scrollFixed],
    data() {
      return {
        remindOrders: [],
        checkedOrders: [],
        checkedAll: false,
        checkbox: true
      }
    },
    activated() {},
    computed: {
      submitBarText() {
        return '发送通知';
      }
    },
    watch: {
	    '$route': 'resetInit'
	  },

    created() {
      this.resetInit();
    },
    methods: {

      initData() {
        this.checkedOrders = [];
        return this.$reqGet(ORDER_REMIND, {
          tmid: this.user.id,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        },{
          hideLoading: true
        }).then(res => {
           if (this.checkedAll) {
            this.setCheckAll(true);
           } else {
            this.checkedAll = true;
           }
          const { rows, total } = res.data.data;
          this.remindOrders.push(...rows);
          return {
            pageCount: rows.length,
            totalCount: total
          };
        });
      },

      setCheckAll(val) {
        this.checkedOrders = val ? this.remindOrders.map(orders => orders) : [];
      },
      goOtherOrder(orders) {
        const orderId = orders.id;
        this.$router.push({
          name: "payment",
          params: {
            payId: orderId
          }
        });
      },
      remindSubmit() {
        let id = [];
        this.checkedOrders.forEach(item => {
          id.push(item.id);
        });
        this.$reqGet(ORDER_REMIND_SEND, {
          id:id
        }).then(res=>{
          return this.$dialog.alert({message: '发送通知成功'});
        }).then(() => {
          window.location.reload();
        });
      }
    },
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Panel.name]: Panel,
      [Card.name]: Card,
      [IsEmpty.name]: IsEmpty,
      [TitleBar.name]: TitleBar,
      [CheckboxGroup.name]: CheckboxGroup,
      [Checkbox.name]: Checkbox,
      [SubmitBar.name]: SubmitBar
    }
  }

</script>

<style  lang="scss" scoped>
  .allOrder{
    margin-top: 45px;
    background-color: #f2f2f2;
  }
  .order-items {

  }
  .checkbox{
    display: inline-block;
  }
  .itemSN{
    width: 60%;
    float: right;
    display: inline-block;
  }
  .orderCell{
    margin-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .orderproduct-group{
    padding: 10px;
  }
  .orderImg{
    width: 90px;
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
  }


  .items-title{
    display: inline-block;
    margin-left: 10px;
    width: 49%;
  }

  .items-count{
    display: inline-block;
    float: right;
  }
  .items-total{
    color: #917e90;
  }

  .order-person{

  }


  .person-info{
    display: inline-block;
  }

  .person-date{
    display: inline-block;
    float: right;
  }

  .yuan {
    font-size: 16px;

  ::before {
    content: "¥";
    margin-right: 3px;
    font-size: 8px;
  }
  }
</style>
